<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section class="graphical">
        <SearchCondition
          :formItemList="formItemList"
          :emitSearch="emitSearch"
          :resetSearch="resetSearch"
          @search="search"
          ref="mychild"
        />
      </section>
      <div class="decorate"></div>
      <section>
        <div style="padding: 20px 20px 20px 20px">
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            :border="$isborder"
            stripe
            size="mini"
          >
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left"> </el-table-column>
            <el-table-column label="姓名" prop="username" :width="$widthb" align="left"> </el-table-column>
            <el-table-column prop="account" label="读者证号" :width="$widthb" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="tel" label="联系方式" :width="$widthb" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="feedback" label="留言" :width="$widthc" show-overflow-tooltip align="left">
            </el-table-column>
            <el-table-column prop="manage_feedback" label="回复" :width="$widthc" align="left" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="create_time" label="提交时间" :width="$widthb" align="left">
              <template slot-scope="scope">
                <div style="padding: 5px">
                  {{ scope.row.create_time }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="120" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div @click="reply(scope.row)" class="details-box" v-show="scope.row.manage_feedback == null" v-alive>
                    回复
                  </div>
                  <div class="completed-box" v-show="scope.row.manage_feedback != null">已回复</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next, jumper"
            :total="listTotal"
            :page-size="10"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
          >
          </el-pagination>
          
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>
    <div>
      <ReplyDia ref="reply" @showType="showType"></ReplyDia>
    </div>
  </div>
</template>

<script>
import ReplyDia from "./components/index.vue"
export default {
  name: "AdminIndex",
  components: {
    ReplyDia,
  },
  data() {
    return {
      formItemList: [
        {
          label: "处理状态",
          type: "select",
          selectOptions: [
            {
              value: 0,
              name: "全部",
            },
            {
              value: 1,
              name: "已回复",
            },
            {
              value: 2,
              name: "未回复",
            },
          ],
          param: "type",
          defaultSelect: "", // 下拉框默认选中项
        },
        {
          label: "提交时间",
          type: "dateRange",
          param1: "start_time",
          param2: "end_time",
        },
        {
          label: "关键词",
          type: "input",
          param: "keywords",
        },
      ],
      searchList: {
        start_time: "",
        end_time: "",
        keywords: "",
        type: "",
      },
      emitSearch: false,
      resetSearch: true,
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      delid: "",
      replyid: "",
      limit: 10,
    }
  },

  mounted() {},
  created() {},
  activated() {
    if (this.$route.params.action == "refresh" || this.$isFirstInPage.get()) {
      this.page = 1
      this.listTotal = 0
      this.currentPage1 = 1
      this.tableData = []

      this.getList()
    }

    this.setPageTabs()
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 搜索条件改变时
    search(params) {
      this.searchList = params
      this.page = 1
      this.getList()
    },
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/feedback/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: this.limit,
            ...this.searchList,
          },
        })
        if (res) {
          this.tableData = res.content.data
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        console.log(err)
        this.errorHandler(err)
      }
    },
    //回复
    reply(row) {
      this.replyid = row.id
      this.$refs.reply.showdialog("留言回复", "reply")
    },
    async showType(type, text) {
      try {
        let res = await this.request({
          url: "/admin/feedback/reply",
          method: "post",
          loading: true,
          data: {
            id: this.replyid,
            content: text,
          },
        })
        if (res) {
          this.$message.success(res.msg)
          let that = this
          setTimeout(() => {
            that.getList()
          }, 2000)
        }
      } catch (err) {
        let error = err.message.split("/")
        // if (error[0] == 203) {
        //   this.tableData = []
        // }
        console.log(err)
        this.errorHandler(err)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
